import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const NgIncludeView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
      this.templates = [
        { name: "template1.html", url: "template1.html" },
        { name: "template2.html", url: "template2.html" },
      ];
      // eslint-disable-next-line prefer-destructuring
      this.template = this.templates[0];
    }
  },
  controllerAs: "$ctrl",
  template: html /* HTML */ `
    <div>
      <select
        ng-model="$ctrl.template"
        ng-options="t.name for t in $ctrl.templates"
      >
        <option value="">(blank)</option>
      </select>
      url of the template: <code>{{$ctrl.template.url}}</code>
      <hr />
      <div
        class="slide-animate-container"
        style="height: unset;"
        ng-include="$ctrl.template.url"
      ></div>
    </div>
  `,
});

export default NgIncludeView;
